﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title id='Description'>JavaScript Radio Button - Mobile Example
    </title>
    <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../simulator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("buttongroupcontainer");
            $("#radioButton1").jqxRadioButton({ theme: theme, groupName: 'type', checked: true });
            $("#radioButton2").jqxRadioButton({ theme: theme, groupName: 'type', checked: false });
            $("#radioButton3").jqxRadioButton({ theme: theme, groupName: 'type', checked: false });
            $("#radioButton4").jqxRadioButton({ theme: theme, groupName: "class", checked: true });
            $("#radioButton5").jqxRadioButton({ theme: theme, groupName: "class", checked: false });

            $("#button").jqxButton({ theme: theme, enableHover: false, width: '80%', height: 40 });
            $(".input").jqxInput({ theme: theme, width: '100%', height: 40 });
            initSimulator("buttongroupcontainer");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div id="buttongroupcontainer">
                <div style="margin-left: 15%; position: relative; top: 30px; width: 70%;">
                    <h2 style="text-align: center;">Search Cheap Flights</h2>
                    <div style="margin-top: 5px;" id="buttongroup">
                        <div id="radioButton1">Return
                        </div>
                        <div id="radioButton2">One Way
                        </div>
                        <div id="radioButton3">Multiple Cities</div>
                    </div>
                    <br />
                        <input placeholder="Departure city/airport" class="input" type="text" />
                    <br />
                        <input style="margin-top: 10px;" placeholder="Destination city/airport" class="input" type="password" />
                    <div style="margin-top: 20px; margin-bottom: 20px;" id="buttongroup2">
                        <div id="radioButton4">Travellers
                        </div>
                        <div id="radioButton5">Economy
                        </div>
                    </div>
                    <div>
                        <input type="button" value="Search" style="margin-left: 10%; margin-top: 10px;" id="button" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
